<template>
  <div class="tools-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-info">
          <h1 class="page-title">
            <el-icon><Tools /></el-icon>
            常用工具
          </h1>
          <p class="page-description">高效实用的开发工具集合，提升您的工作效率</p>
        </div>
        <div class="header-stats">
          <div class="stat-item">
            <span class="stat-value">{{ totalTools }}</span>
            <span class="stat-label">工具数量</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ totalUsage }}</span>
            <span class="stat-label">总使用次数</span>
          </div>
          <div class="stat-item">
            <span class="stat-value">{{ aiToolsCount }}</span>
            <span class="stat-label">AI工具</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 所有工具区域 -->
    <div class="tools-section">
      <div class="tools-grid">
        <!-- Base64编码解码 -->
        <div class="tool-card" @click="openBase64Drawer('base64', {})">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="ai-badge" v-if="true">AI</div>
          </div>
          <div class="tool-content">
            <h3 class="tool-title">Base64编码解码</h3>
            <p class="tool-description">快速进行Base64编码和解码操作</p>
            <div class="tool-stats">
              <span class="usage-count">使用{{ groupResult.Tool_base64 }}次</span>
            </div>
          </div>
          <div class="tool-footer">
            <el-button type="primary" size="small">开始使用</el-button>
          </div>
        </div>

        <!-- 日期格式转换 -->
        <div class="tool-card" @click="openDateConverterDrawer('dateTime', {})">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon><Timer /></el-icon>
            </div>
            <div class="ai-badge">AI</div>
          </div>
          <div class="tool-content">
            <h3 class="tool-title">日期格式转换</h3>
            <p class="tool-description">智能识别并转换日期格式</p>
            <div class="tool-stats">
              <span class="usage-count">使用{{ groupResult.Tool_datetime }}次</span>
            </div>
          </div>
          <div class="tool-footer">
            <el-button type="primary" size="small">开始使用</el-button>
          </div>
        </div>

        <!-- 字节转换 -->
        <div class="tool-card" @click="openByteDrawer('byte', {})">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon><PieChart /></el-icon>
            </div>
          </div>
          <div class="tool-content">
            <h3 class="tool-title">字节转换</h3>
            <p class="tool-description">文件大小单位转换工具</p>
            <div class="tool-stats">
              <span class="usage-count">使用{{ groupResult.Tool_byte }}次</span>
            </div>
          </div>
          <div class="tool-footer">
            <el-button type="primary" size="small">开始使用</el-button>
          </div>
        </div>

        <!-- 图片压缩 -->
        <div class="tool-card" @click="openImageCompressDrawer('imageCompress', {})">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon><Picture /></el-icon>
            </div>
            <div class="ai-badge">AI</div>
          </div>
          <div class="tool-content">
            <h3 class="tool-title">图片压缩</h3>
            <p class="tool-description">智能图片压缩和质量优化</p>
            <div class="tool-stats">
              <span class="usage-count">使用{{ groupResult.Tool_imageCompress }}次</span>
            </div>
          </div>
          <div class="tool-footer">
            <el-button type="primary" size="small">开始使用</el-button>
          </div>
        </div>

        <!-- JSON格式化 -->
        <div class="tool-card" @click="openJsonFormatterDrawer('jsonFormatter', {})">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon><Document /></el-icon>
            </div>
            <div class="ai-badge">AI</div>
          </div>
          <div class="tool-content">
            <h3 class="tool-title">JSON格式化</h3>
            <p class="tool-description">智能JSON格式化、压缩和修复工具</p>
            <div class="tool-stats">
              <span class="usage-count">使用{{ groupResult.Tool_jsonFormatter }}次</span>
            </div>
          </div>
          <div class="tool-footer">
            <el-button type="primary" size="small">开始使用</el-button>
          </div>
        </div>

        <!-- 数据生成器 -->
        <div class="tool-card" @click="openDataGeneratorDrawer('dataGenerator', {})">
          <div class="tool-header">
            <div class="tool-icon">
              <el-icon><MagicStick /></el-icon>
            </div>
            <div class="ai-badge">AI</div>
          </div>
          <div class="tool-content">
            <h3 class="tool-title">数据生成器</h3>
            <p class="tool-description">智能生成各类测试数据，支持多种格式</p>
            <div class="tool-stats">
              <span class="usage-count">使用{{ groupResult.Tool_dataGenerator }}次</span>
            </div>
          </div>
          <div class="tool-footer">
            <el-button type="primary" size="small">开始使用</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 工具组件 -->
    <Base64 ref="base64DrawerRef" />
    <ByteConvert ref="byteDrawerRef" />
    <DateConverter ref="dateConverterDrawerRef" />
    <ImageCompress ref="imageCompressDrawerRef" />
    <JsonFormatter ref="jsonFormatterDrawerRef" />
    <DataGenerator ref="dataGeneratorDrawerRef" />
  </div>
</template>

<script setup lang="ts" name="about">
import { reactive, ref, computed } from "vue";
import { Tools, Document, Timer, PieChart, Picture, MagicStick } from "@element-plus/icons-vue";
import Base64 from "./components/Base64.vue";
import ByteConvert from "./components/ByteConvert.vue";
import DateConverter from "./components/DateConverter.vue";
import ImageCompress from "./components/ImageCompress.vue";
import JsonFormatter from "./components/JsonFormatter.vue";
import DataGenerator from "./components/DataGenerator.vue";
import { useUserAction } from "@/hooks/useUserAction";
import { BusinessOptType, BusinessType } from "@/enums/sysEnum";
import { useUserStore } from "@/stores/modules/user";
import apiService from "@/api/services/apiService";
import { onMounted } from "vue";

const useUser = useUserStore();

const groupResult = reactive({
  Tool_base64: 0,
  Tool_datetime: 0,
  Tool_byte: 0,
  Tool_keyValue: 0,
  Tool_imageCompress: 0,
  Tool_dataGenerator: 0,
  Tool_jsonFormatter: 0
});

interface ToolGroupResult {
  _id: string;
  value: number;
}

// 计算属性
const totalTools = computed(() => 7); // 当前工具数量
const totalUsage = computed(() => {
  return Object.values(groupResult).reduce((sum, count) => sum + count, 0);
});
const aiToolsCount = computed(() => 5); // AI工具数量

onMounted(() => {
  findUnReadMessage();
});

const findUnReadMessage = async () => {
  let groupCondition = [
    { $project: { businessType: 1, _id: 0 } },
    {
      $match: {
        businessType: {
          $in: ["Tool_base64", "Tool_datetime", "Tool_byte", "Tool_imageCompress", "Tool_dataGenerator", "Tool_jsonFormatter"]
        }
      }
    },
    { $group: { _id: "$businessType", value: { $sum: 1 } } }
  ];
  const { data } = await apiService.group<ToolGroupResult[]>("userAction", groupCondition);
  data.forEach(item => {
    if (item._id === "Tool_base64") {
      groupResult.Tool_base64 = item.value;
    } else if (item._id === "Tool_datetime") {
      groupResult.Tool_datetime = item.value;
    } else if (item._id === "Tool_byte") {
      groupResult.Tool_byte = item.value;
    } else if (item._id === "Tool_imageCompress") {
      groupResult.Tool_imageCompress = item.value;
    } else if (item._id === "Tool_dataGenerator") {
      groupResult.Tool_dataGenerator = item.value;
    } else if (item._id === "Tool_jsonFormatter") {
      groupResult.Tool_jsonFormatter = item.value;
    }
  });
};

// 打开 drawer(新增、查看、编辑)
const base64DrawerRef = ref<InstanceType<typeof Base64> | null>(null);
const openBase64Drawer = (key: string, row: Partial<any> = {}) => {
  const { addUserAction } = useUserAction(BusinessType.Tool_base64);
  addUserAction(useUser.userInfo.userName, BusinessOptType.CLICK, "Base64编码解码");
  groupResult.Tool_base64 = groupResult.Tool_base64 + 1;
  base64DrawerRef.value?.acceptParams(row);
};

const byteDrawerRef = ref<InstanceType<typeof Base64> | null>(null);
const openByteDrawer = (key: string, row: Partial<any> = {}) => {
  const { addUserAction } = useUserAction(BusinessType.Tool_byte);
  addUserAction(useUser.userInfo.userName, BusinessOptType.CLICK, "字节转换");
  groupResult.Tool_byte = groupResult.Tool_byte + 1;
  byteDrawerRef.value?.acceptParams(row);
};

const dateConverterDrawerRef = ref<InstanceType<typeof DateConverter> | null>(null);
const openDateConverterDrawer = (key: string, row: Partial<any> = {}) => {
  const { addUserAction } = useUserAction(BusinessType.Tool_datetime);
  addUserAction(useUser.userInfo.userName, BusinessOptType.CLICK, "日期格式转换");
  groupResult.Tool_datetime = groupResult.Tool_datetime + 1;
  dateConverterDrawerRef.value?.acceptParams(row);
};

const imageCompressDrawerRef = ref<InstanceType<typeof ImageCompress> | null>(null);
const openImageCompressDrawer = (key: string, row: Partial<any> = {}) => {
  const { addUserAction } = useUserAction(BusinessType.Tool_imageCompress);
  addUserAction(useUser.userInfo.userName, BusinessOptType.CLICK, "图片压缩");
  groupResult.Tool_imageCompress = groupResult.Tool_imageCompress + 1;
  imageCompressDrawerRef.value?.acceptParams(row);
};

const dataGeneratorDrawerRef = ref<InstanceType<typeof DataGenerator> | null>(null);
const openDataGeneratorDrawer = (key: string, row: Partial<any> = {}) => {
  const { addUserAction } = useUserAction(BusinessType.Tool_dataGenerator);
  addUserAction(useUser.userInfo.userName, BusinessOptType.CLICK, "数据生成器");
  groupResult.Tool_dataGenerator = groupResult.Tool_dataGenerator + 1;
  dataGeneratorDrawerRef.value?.acceptParams(row);
};

const jsonFormatterDrawerRef = ref<InstanceType<typeof JsonFormatter> | null>(null);
const openJsonFormatterDrawer = (key: string, row: Partial<any> = {}) => {
  const { addUserAction } = useUserAction(BusinessType.Tool_jsonFormatter);
  addUserAction(useUser.userInfo.userName, BusinessOptType.CLICK, "JSON格式化");
  groupResult.Tool_jsonFormatter = groupResult.Tool_jsonFormatter + 1;
  jsonFormatterDrawerRef.value?.acceptParams(row);
};
</script>

<style lang="scss" scoped>
.tools-page {
  min-height: 100vh;
  padding: 10px;
  background: var(--el-bg-color-page);
}

// 页面头部
.page-header {
  position: relative;
  padding: 30px;
  margin-bottom: 32px;
  overflow: hidden;
  color: white;
  background: linear-gradient(135deg, var(--el-color-primary) 0%, var(--el-color-primary-light-3) 100%);
  border-radius: 12px;
  .header-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .header-info {
      .page-title {
        display: flex;
        gap: 12px;
        align-items: center;
        margin: 0 0 8px;
        font-size: 28px;
        font-weight: 600;
        color: white;
        .el-icon {
          font-size: 32px;
        }
      }
      .page-description {
        margin: 0;
        font-size: 16px;
        color: rgb(255 255 255 / 80%);
      }
    }
    .header-stats {
      display: flex;
      gap: 30px;
      .stat-item {
        text-align: center;
        .stat-value {
          display: block;
          font-size: 24px;
          font-weight: 700;
          color: white;
        }
        .stat-label {
          display: block;
          margin-top: 4px;
          font-size: 14px;
          color: rgb(255 255 255 / 80%);
        }
      }
    }
  }
}

// 工具分类区域
.tools-section {
  margin-bottom: 32px;
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 20px;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
    .section-title {
      display: flex;
      gap: 8px;
      align-items: center;
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      .el-icon {
        font-size: 20px;
        color: var(--el-color-primary);
      }
    }
  }
}

// 工具网格
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  .tool-card {
    position: relative;
    padding: 24px;
    cursor: pointer;
    background-color: var(--el-bg-color);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 12px;
    box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
    transition: all 0.3s ease;
    &:hover {
      border-color: var(--el-color-primary-light-7);
      box-shadow: 0 4px 20px rgb(0 0 0 / 15%);
      transform: translateY(-2px);
    }
    .tool-header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .tool-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: var(--el-color-primary-light-9);
        border-radius: 10px;
        .el-icon {
          font-size: 24px;
          color: var(--el-color-primary);
        }
      }
      .ai-badge {
        position: absolute;
        top: -8px;
        right: -8px;
        z-index: 10;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: bold;
        color: white;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
        transform: scale(0.9);
        animation: ai-pulse 2s infinite;
      }
    }
    .tool-content {
      margin-bottom: 16px;
      .tool-title {
        margin: 0 0 8px;
        font-size: 16px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
      .tool-description {
        margin: 0 0 12px;
        font-size: 14px;
        line-height: 1.5;
        color: var(--el-text-color-regular);
      }
      .tool-stats {
        .usage-count {
          font-size: 12px;
          color: var(--el-color-primary);
        }
      }
    }
    .tool-footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-top: 12px;
      border-top: 1px solid var(--el-border-color-lighter);
    }
  }
}

// AI角标动画
@keyframes ai-pulse {
  0% {
    opacity: 1;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(0.9);
  }
}

// 响应式设计
@media (width <= 768px) {
  .tools-page {
    padding: 16px;
  }
  .page-header {
    padding: 20px;
    .header-content {
      flex-direction: column;
      gap: 20px;
      text-align: center;
      .header-stats {
        justify-content: center;
      }
    }
  }
  .section-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .tools-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (width <= 480px) {
  .tools-grid {
    .tool-card {
      padding: 16px;
    }
  }
  .header-stats {
    gap: 20px !important;
    .stat-item {
      .stat-value {
        font-size: 20px;
      }
    }
  }
}
</style>
